<template>
	<view>
		<view class="form">
			<view class="form_item">
				<view class="label">
					店铺名称
				</view>
				<view class="input">
					<u--input placeholder="请输入店铺名称" placeholderStyle='color:#8B8B8B;' border='none' v-model="form.name">
					</u--input>
				</view>
				<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
			</view>
			<view class="form_item">
				<view class="label">
					银行账户
				</view>
				<view class="input" @click="clickto('/pages/wallet/bankcard')">
					<u--input readonly placeholder="请绑定银行账户" placeholderStyle='color:#8B8B8B;' border='none'
						v-model="form.card"></u--input>
				</view>
				<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
			</view>
			<view class="form_item">
				<view class="label">
					地理位置
				</view>
				<view class="input" @click="chooseaddr">
					<view class="" style="color: #8B8B8B;" v-if="!addr">
						请输入店铺位置
					</view>
					<view class="" v-else style="padding-right: 10rpx;">
						{{addr}}
					</view>
					<!-- <u--input readonly placeholder="请输入店铺位置" placeholderStyle='color:#8B8B8B;' border='none' v-model="addr"></u--input> -->
					<!-- <u--textarea confirmType='done' v-model="addr" placeholderStyle='color:#8B8B8B;'
						placeholder="请输入店铺位置" autoHeight border='none'></u--textarea> -->
				</view>
				<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
			</view>
			<view class="form_title">
				<view class="form_line">

				</view>
				<view class="title_name">
					主营业务
				</view>
			</view>
			<u--textarea v-model="form.intro" placeholder="介绍一下店铺主营业务" confirmType='完成' placeholderStyle='color:#8B8B8B'
				count height='236rpx' maxlength='5000'></u--textarea>
			<view class="form_title">
				<view class="form_line">

				</view>
				<view class="title_name">
					店铺封面
				</view>
			</view>
			<view class="pic_box">
				<view class="pic_item">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1">
						<image class="pic_bg" src="/static/img/my/picbg.png" mode=""></image>
						<view class="pic_item_name">
							上传图片
						</view>
					</u-upload>
				</view>

			</view>
			<view class="btn" @click="submit">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		submitScore,
		uploadImg
	} from '@/api/product.js'
	// #ifdef MP
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	import {
		getStore
	} from '@/api/product.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					image: '',
					lng: '',
					lat: '',
					intro: "",
					card: "6214887499451247"
				},
				fileList1: [],
				addr: '',
				baseurl:''
			};
		},
		methods: {
			clickto(url) {
				uni.$u.route(url)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let _this = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://my.tongqianzhu.com/api/common/upload',
						header: {
							"token": uni.getStorageSync('token')
						},
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
								_this.form.image = JSON.parse(res.data).data.url
								// console.log(JSON.parse(res.data).data.url)
							}, 1000)
						}
					});
				})
			},
			submit() {
				let {
					name,
					image,
					lng,
					lat,
					intro,
					card
				} = this.form
				if (!name) {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					})
					return
				}
				if (!image) {
					uni.showToast({
						title: '请上传店铺封面',
						icon: 'none'
					})
					return
				}
				if (!this.addr) {
					uni.showToast({
						title: '请选择店铺地理位置',
						icon: 'none'
					})
					return
				}
				if (!intro) {
					uni.showToast({
						title: '请填写主营业务',
						icon: 'none'
					})
					return
				}
				submitScore({
					name,
					image,
					lng,
					lat,
					intro,
					card
				}).then(res => {
					// console.log(res.data)
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}

				})
			},
			chooseaddr() {
				// 地图插件
				const key = this.$mapkey; //使用在腾讯位置服务申请的key
				const referer = '商城'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: '',
					longitude: ''
				});
				const category = '';
				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' +
						category
				});
			}
		},
		onShow() {
			// console.log(chooseLocation)
			if (chooseLocation.getLocation()) {
				const location = chooseLocation.getLocation();
				console.log(location)
				this.form.lat = location.latitude
				this.form.lng = location.longitude
				this.addr = location.address
			}
		},
		onLoad() {
			this.baseurl=this.$BASE_URL
			let _this = this
			const qqmap = require('@/common/qqmap-wx-jssdk.js');
			const showmap = new qqmap({
				key: 'IPXBZ-BJDEW-O4JRO-RUQEL-JXB6S-QSBZJ'
			});
			getStore().then(res => {
				if (res.data.data) {
					// console.log(res.data.data.store)
					if (!res.data.data.store) {
						return
					}
					this.form = res.data.data.store
					this.fileList1 = [{
						url: this.baseurl+this.form.image
					}]
					// console.log(_this.form.lng)
					showmap.reverseGeocoder({
						location: {
							latitude: _this.form.lat,
							longitude: _this.form.lng
						},
						success(result) {
							// 地址信息
							console.log(result)
							const addrs = result.result.address;
							_this.addr = addrs
							// console.log(addrs)
						},
						fail: function(err) {
							console.log(err);
						},
						complete: function(ss) {
							console.log(ss);
						}

					});
				}

			})

		}
	}
</script>

<style lang="less">
	.form {
		padding: 10rpx 31rpx 70rpx;
		border-top: 2rpx solid #F4F6F8;

		.form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F4F6F8;
			height: 105rpx;

			.label {
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
				padding-left: 10rpx;
				width: 210rpx;
			}

			.input {
				font-size: 30rpx;
				flex: 1;
			}

			.right_icon {
				width: 15rpx;
				height: 24rpx;
			}
		}

		.form_title {
			display: flex;
			padding: 45rpx 0 36rpx 10rpx;
			align-items: center;
			color: #333;
			font-size: 30rpx;

			.form_line {
				width: 8rpx;
				height: 28rpx;
				background: #FE712A;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}
	}

	.pic_box {
		display: flex;

		.pic_item {
			width: 198rpx;
			height: 198rpx;
			position: relative;
			margin-right: 34rpx;
		}

		.pic_bg {
			width: 198rpx;
			height: 198rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pic_item_name {
			text-align: center;
			width: 100%;
			position: absolute;
			bottom: 0;
			color: #fff;
			font-size: 26rpx;
			line-height: 60rpx;
		}
	}

	.btn {
		width: 687rpx;
		line-height: 114rpx;
		background: linear-gradient(153deg, #FF8717, #FF5F00);
		border-radius: 57rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		margin-top: 77rpx;
	}
</style>
